<template>
    <view class="uni-popup-share">
        <view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view>
        <view class="uni-share-content">
            <view class="uni-share-content-box">
                <view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
                    <image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
                    <text class="uni-share-text">{{item.text}}</text>
                </view>

            </view>
        </view>
        <view class="uni-share-button-box">
            <button class="uni-share-button" @click="close">取消</button>
        </view>
    </view>
</template>

<script>
    import popup from '../uni-popup/popup.js'
    export default {
        name: 'UniPopupShare',
        mixins:[popup],
        props: {
            title: {
                type: String,
                default: '分享到'
            },
            beforeClose: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                bottomData: [{
                        text: '微信',
                        icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
                        name: 'wx'
                    },
                    {
                        text: '支付宝',
                        icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
                        name: 'wx'
                    },
                    {
                        text: 'QQ',
                        icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
                        name: 'qq'
                    },
                    {
                        text: '新浪',
                        icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
                        name: 'sina'
                    },
                    {
                        text: '百度',
                        icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
                        name: 'copy'
                    },
                    {
                        text: '其他',
                        icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
                        name: 'more'
                    }
                ]
            }
        },
        created() {},
        methods: {
            /**
             * 选择内容
             */
            select(item, index) {
                this.$emit('select', {
                    item,
                    index
                })
                this.close()
                
            },
            /**
             * 关闭窗口
             */
            close() {
                if(this.beforeClose) return
                this.popup.close()
            }
        }
    }
</script>
<style lang="scss" scoped>
    .uni-popup-share {
        background-color: #fff;
    }
    .uni-share-title {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 40px;
    }
    .uni-share-title-text {
        font-size: 14px;
        color: #666;
    }
    .uni-share-content {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        justify-content: center;
        padding-top: 10px;
    }

    .uni-share-content-box {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        flex-wrap: wrap;
        width: 360px;
    }

    .uni-share-content-item {
        width: 90px;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        padding: 10px 0;
        align-items: center;
    }

    .uni-share-content-item:active {
        background-color: #f5f5f5;
    }

    .uni-share-image {
        width: 30px;
        height: 30px;
    }

    .uni-share-text {
        margin-top: 10px;
        font-size: 14px;
        color: #3B4144;
    }

    .uni-share-button-box {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        padding: 10px 15px;
    }

    .uni-share-button {
        flex: 1;
        border-radius: 50px;
        color: #666;
        font-size: 16px;
    }

    .uni-share-button::after {
        border-radius: 50px;
    }
</style>
